<template>
	<view class="content">
		<u-navbar back-text="返回" :is-back="true" title="用户加入群聊数量">
			<!--<view class="slot-wrap" style="background: red;display: flex;align-items: center;width: 100%;flex: 1;padding: 0 30rpx;">
						自定义内容
			</view>-->
		</u-navbar>
		<view class="show_main" v-if="show_main">
			
	        <view class="bgf p20 bbo" v-for="(item,index) in auth_rule" :key="item.id">
				<view>
				   <view class="pr" style="display: inline;" @click="setCheckbox" :data-index="index" :data-id="item.id">
					<view class="pa bg-hyaline"></view>
					<checkbox :value="item.id" :checked="item.checked" style="transform:scale(0.8)" color="blue"/>{{item.title}}
				   </view>
				</view>
				<view class="mt20" :style="'padding-left: '+(item['child'][0] ? item['child'][0].padding : '0')+'rpx;'">
					<view v-for="(item2,index2) in item.child" :key="item2.id">
						<view v-if="item2.child[0]" class="mr10" >
							<view >
								<view class="pr" style="display: inline;" @click="setCheckbox" :data-index="index+'_'+index2" :data-id="item2.id">
								   <view class="pa bg-hyaline"></view>
								   <checkbox :value="item2.id"  :checked="item2.checked" style="transform:scale(0.8)" color="blue"/>{{item2.title}}
							    </view>
							</view>
							<view :style="'padding-left:'+item2['child'][0].padding+'rpx;'" class="mt10">
								<view v-for="(item3,index3) in item2.child" :key="item3.id" @click="setCheckbox" :data-index="index+'_'+index2+'_'+index3" :data-id="item3.id" style="display: inline;" class="mr10 pr">
									<view class="pa bg-hyaline"></view>
									<checkbox :value="item3.id" :checked="item3.checked" style="transform:scale(0.8)" color="blue"/>{{item3.title}}
								</view>
							</view>
						</view>
						<view v-else>
							<view class="mr10 pr" @click="setCheckbox" :data-index="index+'_'+index2" :data-id="item2.id">
								<view class="pa bg-hyaline"></view>
								<checkbox :value="item2.id" :checked="item2.checked" style="transform:scale(0.8)" color="blue"/>{{item2.title}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<input type="text" :value="rules" maxlength="-1" name="rules" class="hide"/>
			
		</view>
		<loading :loading="not_load"/><!--加载状态-->
		
	</view>
</template>

<script setup>
import { onLoad, onShow, onHide } from '@dcloudio/uni-app';
import { ref } from 'vue';	
const show_main=ref(true);
const not_load=ref(true);
const title=ref('');
const rules=ref([]);
const auth_rule=ref([
		{
			id:1,
			pid:0,
			path:'0-1',
			title:'群聊1',
			name:'index/index',
			padding:0,
			checked:false,
			rules:[],
			child:[
				{
					id:2,
					pid:1,
					path:'0-1-2',
					title:'群聊1-2',
					name:'index/index2',
					padding:30,
					checked:false,
					rules:[],
					child:[
						{
							id:3,
							pid:2,
							path:'0-1-2-3',
							title:'群聊1-2-1',
							name:'index/index3',
							padding:60,
							checked:false,
							rules:[],
						},
						{
							id:4,
							pid:2,
							path:'0-1-2-4',
							title:'群聊1-2-2',
							name:'index/index3',
							padding:60,
							checked:false,
							rules:[],
						}
					]
				}
			],
		},
		{
			id:10,
			pid:0,
			path:'0-10',
			title:'群聊2',
			name:'index/index',
			padding:0,
			checked:false,
			rules:[],
			child:[
				{
					id:20,
					pid:10,
					path:'0-10-20',
					title:'群聊2-1',
					name:'index/index2',
					padding:30,
					checked:false,
					rules:[],
					child:[
						{
							id:30,
							pid:20,
							path:'0-10-20-30',
							title:'群聊2-2-1',
							name:'index/index3',
							padding:60,
							checked:false,
							rules:[],
						},
						{
							id:40,
							pid:20,
							path:'0-10-20-40',
							title:'群聊2-2-2',
							name:'index/index3',
							padding:60,
							checked:false,
							rules:[],
						}
					]
				}
			],
		},
]);
const setCheckbox=(e)=>{
	let index=(e.currentTarget.dataset.index).toString().split('_');
	let tempIndex0=parseInt(index[0]);
	let tempIndex1=index[1] >= 0 ? parseInt(index[1]) : -1;
	let tempIndex2=index[2] >= 0 ? parseInt(index[2]) : -1;
	let id=e.currentTarget.dataset.id;
	
	// 点击第一层
	if(id == auth_rule.value[tempIndex0].id){
		auth_rule.value[tempIndex0].checked=auth_rule.value[tempIndex0].checked ? false : true;
		if(!auth_rule.value[tempIndex0].checked){
			for(let i in auth_rule.value[tempIndex0].child){
				auth_rule.value[tempIndex0].child[i].checked=false;
				for(let j in auth_rule.value[tempIndex0].child[i].child){
					auth_rule.value[tempIndex0].child[i].child[j].checked=false;
				}
			}
		}else{
			for(let i in auth_rule.value[tempIndex0].child){
				auth_rule.value[tempIndex0].child[i].checked=true;
				for(let j in auth_rule.value[tempIndex0].child[i].child){
					auth_rule.value[tempIndex0].child[i].child[j].checked=true;
				}
			}
		}
	}
	
	// 点击第二层
	if(tempIndex1 >= 0){
		if(id == auth_rule.value[tempIndex0].child[tempIndex1].id){
			auth_rule.value[tempIndex0].child[tempIndex1].checked=auth_rule.value[tempIndex0].child[tempIndex1].checked ? false : true;
		    if(!auth_rule.value[tempIndex0].child[tempIndex1].checked){
				for(let i in auth_rule.value[tempIndex0].child[tempIndex1].child){
					auth_rule.value[tempIndex0].child[tempIndex1].child[i].checked=false;
				}
			}else{
				for(let i in auth_rule.value[tempIndex0].child[tempIndex1].child){
					auth_rule.value[tempIndex0].child[tempIndex1].child[i].checked=true;
				}
			}
		}
		let tempIscheck=false;
		for(let i in auth_rule.value[tempIndex0].child){
			if(auth_rule.value[tempIndex0].child[i].checked){
				tempIscheck=true;
				break;
			}
		}
		auth_rule.value[tempIndex0].checked=tempIscheck;
	}
	
	// 点击第二层
	if(tempIndex2 >= 0){
		auth_rule.value[tempIndex0].child[tempIndex1].child[tempIndex2].checked=auth_rule.value[tempIndex0].child[tempIndex1].child[tempIndex2].checked ? false : true;
	    let tempIscheck2=false;
		for(let i in auth_rule.value[tempIndex0].child[tempIndex1].child){
			if(auth_rule.value[tempIndex0].child[tempIndex1].child[i].checked){
				tempIscheck2=true;
				break;
			}
		}
		auth_rule.value[tempIndex0].checked=tempIscheck2;
		auth_rule.value[tempIndex0].child[tempIndex1].checked=tempIscheck2;
	}
    rules.value=[];
	for(let i in auth_rule.value){
		if(auth_rule.value[i].checked) rules.value.push(auth_rule.value[i].id);
		for(let j in auth_rule.value[i].child){
			if(auth_rule.value[i].child[j].checked){
				rules.value.push(auth_rule.value[i].child[j].id);
			}
			for(let t in auth_rule.value[i].child[j].child){
				if(auth_rule.value[i].child[j].child[t].checked){
					rules.value.push(auth_rule.value[i].child[j].child[t].id);
				}
			}
		}
	}
	//console.log(rules.value);
};

//页面加载时
onLoad(async (options)=>{
   
});
//页面显示时执行
onShow(()=>{
	//console.log('语法糖onShow');
});
//页面隐藏时执行
onHide(()=>{
	//console.log('语法糖onHide');
});

/**
 * 模板属性跳转页面
 * @param {Object} e
 */
function goPage(e){
	uni.$utils.dataSetPage(e);
};

</script>

<style  lang="scss">
	page{}
	
</style>
